:root {
    --background-color: #f5f5f5;
    --border-color    : #7591AD;
    --text-color      : #34495e;
    --color1          : #EC3E27;
    --color2          : #fd79a8;
    --color3          : #0984e3;
    --color4          : #00b894;
    --color5          : #fdcb6e;
    --color6          : #e056fd;
    --color7          : #F97F51;
    --color8          : #BDC581;
}

* {
    margin : 0;
    padding: 0;
}

/* 样式部分开始 */

.icon {
    position           : relative;
    width              : 30px;
    height             : 30px;
    color              : var(--border-color);
    /* background-color: #0984e3; */
    /* 居中 */
    display            : flex;
    justify-content    : center;
    align-items        : center;

    /* 鼠标 */
    cursor: pointer;

}

.icon i {
    font-size: 20px;
}

/* 鼠标移入的效果 */
.icon:hover {
    color: var(--color4);
}

/*
点亮之后的样式
稍后使用js控制
*/
.icon.light {
    color: var(--color3);
}

/* 按住点赞按钮抖动的效果 */
.icon.shake {

    animation: shake 0.3s linear infinite;

}

@keyframes shake {
    0% {
        transform: translate(-5%, -5%)
    }

    25% {
        transform: translate(5%, 5%)
    }

    50% {
        transform: translate(-5%, 5%)
    }

    75% {
        transform: translate(5%, -5%)
    }

    100% {
        transform: translate(0%, 0%)
    }
}

/* 按住后 投币和收藏的圆形加载进度 */
/* 我们之前做过了，这里我们再写一遍 */
/* 后期我们用js控制icon增加loading样式 */
.icon.loading::after {
    position           : absolute;
    content            : '';
    box-sizing         : border-box;
    left               : 0;
    top                : 0;
    width              : 30px;
    height             : 30px;
    /* background-color: #0984e311; */
    /* 增加圆角 */
    border-radius      : 50%;
    border             : 2px solid #EC3E27;
    transform          : rotate(45deg);
    /* 这里我们实用贝塞尔曲线函数让动画加载更流畅 */
    /* 只需要执行1次为了让最后现实的跳转更清晰，时间用2.9s */
    animation          : loading 2.9s cubic-bezier(.25, .45, .75, .55) 1;
}

/* 加载动画 还是实用clip-path实现 */

@keyframes loading {

    0% {
        clip-path: polygon(0% 0%,
        0% 0%,
        0% 0%,
        0% 0%,
        0% 0%,
        50% 50%);
    }

    25% {
        clip-path: polygon(0% 0%,
        100% 0%,
        100% 0%,
        100% 0%,
        100% 0%,
        50% 50%);
    }

    50% {
        clip-path: polygon(0% 0%,
        100% 0%,
        100% 100%,
        100% 100%,
        100% 100%,
        50% 50%);
    }

    75% {
        clip-path: polygon(0% 0%,
        100% 0%,
        100% 100%,
        0% 100%,
        0% 100%,
        50% 50%);
    }

    90% {
        /* 从90%开始逐渐隐藏 */
        opacity: 1;
    }

    100% {
        clip-path: polygon(0% 0%,
        100% 0%,
        100% 100%,
        0% 100%,
        0% 0%,
        50% 50%);
        opacity: 0;
    }

}


/* 爆炸放射线效果 */
/* 之前也做过了 */
.icon.bang {
    /* 这样就好了，我们再试一下 */
    animation:  grow 0.3s linear 1;
}

/* 这里我们忘记写了一个动画 */
/* 点击结束的时候会有一个放大缩小的动画效果 */

@keyframes grow{
    0%{
        transform: scale(0.8);
    }
    100%{
        transform: scale(1.2);
    }
}


.icon.bang .shine {
    position: absolute;
    top     : 0;
    top     : 0;
    width              : 30px;
    height             : 30px;
    z-index : 20;

    /* 居中 */
    display        : flex;
    justify-content: center;
    align-items    : center;
}

/* 我们把圆环应用到.shine::after上 */
.icon.bang .shine::after {
    position              : absolute;
    content               : '';
    box-sizing            : border-box;
    /* 用这种方式居中，方便放大 */
    left                  : 50%;
    top                   : 50%;
    transform             : translate(-50%, -50%);
    /* width              : 30px;
    height                : 30px; */
    border-radius         : 50%;
    /* background-color   : #00b894; */

    animation: ray_border 0.4s linear 1 both;
}

/* 在放射的同时还有一个圆环放大效果 */
/* 变化时间与上面的放射同步 */
@keyframes ray_border {
    0% {
        width  : 20px;
        height : 20px;
        border : 2px solid var(--color3);
        opacity: .1;
    }

    60% {
        width  : 100px;
        height : 100px;
        border : 20px solid var(--color3);
        opacity: .1;
    }

    100% {
        width  : 120px;
        height : 120px;
        border : 2px solid var(--color3);
        opacity: 0;
    }
}

/* 这是射线 */
.icon.bang .shine span {

    position           : absolute;
    display            : block;
    width              : 5px;
    /* 高度在动画中定义 */
    /* height          : 100px; */
    /* 增加个圆角 */
    border-radius      : 50%;
    background-color   : var(--color3);
    transform          : rotate(calc(var(--i) * 22.5deg)) translateY(0px);
}

/* 射线奇数偶数的长度和变化不一样，我们分开定义 */
.icon.bang .shine span:nth-child(even) {
    height   : 15px;
    animation: ray_even 0.6s ease 1 both;

}

.icon.bang .shine span:nth-child(odd) {
    height   : 8px;
    animation: ray_odd 0.6s ease 1 both;
}

/* 奇偶动画定义 */

/* 从中心放射向外并边长，直行到60%，开始变短，并清晰度变为0 */

@keyframes ray_even {
    0% {
        transform: rotate(calc(var(--i) * 22.5deg)) translateY(0px);
    }

    60% {
        opacity: 0.8;
        height : 15px;
    }

    100% {
        transform: rotate(calc(var(--i) * 22.5deg)) translateY(60px);
        height   : 5px;
        opacity  : 0;
    }
}

@keyframes ray_odd {
    0% {
        transform: rotate(calc(var(--i) * 22.5deg)) translateY(0px);
    }

    60% {
        opacity: 0.8;
        height : 8px;
    }

    100% {
        transform: rotate(calc(var(--i) * 22.5deg)) translateY(65px);
        height   : 8px;
        opacity  : 0;
    }
}